<template>
    <div class="app-container" v-enter-helper="getList">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <el-row :gutter="20">
                    <!-- <el-col :span="24" :offset="0">
                        <div class="switch">
                            <span>提现限制开关</span>
                            <el-switch
                                v-model="isOpen"
                                :width="60"
                                inactive-color="#ff4949"
                                active-text="开启"
                                inactive-text="关闭">
                            </el-switch>
                        </div>
                    </el-col> -->
                    <el-col :span="24" :offset="0">
                        <el-form
                            :inline="true"
                            :model="listQuery"
                            ref="listQuery"
                            class="demo-form-inline"
                        >
                            <el-form-item label="提现限制开关：">
                                <el-switch
                                v-model="isOpen"
                                :width="60"
                                inactive-color="#ff4949"
                                active-text="开启"
                                inactive-text="关闭"
                                active-value="1"
                                inactive-value="0"
                                @change="handleSwitch">
                            </el-switch>
                            </el-form-item>
                            <el-form-item label="用户编号：">
                                <el-input v-model="listQuery.user_code"></el-input>
                            </el-form-item>
                            <el-form-item label="用户昵称：">
                                <el-input v-model="listQuery.nickname"></el-input>
                            </el-form-item>
                            <el-form-item label="审核状态：">
                                <el-select v-model="listQuery.status" >
                                    <el-option
                                    v-for="item in statusOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="getList">查询</el-button>
                                <el-button type="primary" @click="resetSubmit">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </div>
            <div class="item" v-loading="listLoading">
                <el-table :data="tableData" border stripe>
                    <el-table-column v-for="col in columns"
                        :prop="col.property"
                        :key="col.id"
                        :label="col.label"
                        :width="col.width">
                        <template slot-scope="scope">
                            <span v-if="col.property === 'status'">
                                <span v-if="scope.row[col.property] === 0">审核中</span>
                                <span v-if="scope.row[col.property] === 1">通过</span>
                                <span v-if="scope.row[col.property] === 2">拒绝</span>
                            </span>
                            <span v-else>{{scope.row[col.property]}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row['status'] === 0" @click="handleClick(scope.row)" type="text" size="small">审核</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <cus-pagination
                :total="total"
                :page.sync="listQuery.page"
                :limit.sync="listQuery.perPage"
                @pagination="getList"
                />
            </div>
        </el-card>
        <el-dialog
            title="审核"
            :visible.sync="isVisible"
            width="30%"
            @close="closeDialog">
            <div class="information">
                <div class="text">
                    <span class="tagTitle">用户ID：</span>
                    <span class="tagContent">{{auditInfo.user_code}}</span>
                </div>
                <div class="text">
                    <span class="tagTitle">用户昵称：</span>
                    <span class="tagContent">{{auditInfo.nickname}}</span>
                </div>
                <div class="text" v-if="auditInfo.sociaty_name">
                    <span class="tagTitle">公会名称：</span>
                    <span class="tagContent">{{auditInfo.sociaty_name}}</span>
                </div>
                <div class="text" v-if="auditInfo.sociaty_join_time">
                    <span class="tagTitle">入会时间：</span>
                    <span class="tagContent">{{auditInfo.sociaty_join_time}}</span>
                </div>
                <div class="text">
                    <span class="tagTitle">注册时间：</span>
                    <span class="tagContent">{{auditInfo.add_time}}</span>
                </div>
                <div class="text">
                    <span class="tagTitle">提交时间</span>
                    <span class="tagContent">{{auditInfo.created_at}}</span>
                </div>
            </div>
            <el-form :model="form" ref="form" :rules="rules" label-width="80px" :inline="false" size="normal">
                <el-form-item label="审核" prop="audit">
                    <el-radio-group v-model="form.audit">
                        <el-radio v-for="item in items" :key="item.label" :label="item.label">
                            {{item.title}}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            
            <span slot="footer">
                <el-button type="primary" @click="onSubmit">确定</el-button>
            </span>
        </el-dialog>
        
    </div>
</template>
<script>
import {
    switchData, // 提现限制开关(1=打开,0=关闭)
    listData, // 获取审核列表
    auditStatus, //审核
    getConfig
} from '@/api/member/withdraw'
export default {
    name:'withdraw',
    data() {
        return {
            auditInfo: {
                add_time: null,
                address: "",
                admin_id: null,
                admin_name: null,
                created_at: "",
                id: null,
                mobile: "",
                name: "",
                nickname: "",
                status: null,
                updated_at: "",
                user_code: null,
                user_id: null,
                wx_account: "",
                sociaty_join_time: "",
                sociaty_name: ""
            },
            isOpen: '1',
            listLoading: false,
            statusOption: [
                {   
                    value: '0', //0=审核中,1=通过,2=拒绝
                    label: '审核中'
                },
                {   
                    value: '1', //0=审核中,1=通过,2=拒绝
                    label: '通过'
                },
                {   
                    value: '2', //0=审核中,1=通过,2=拒绝
                    label: '拒绝'
                }
            ],
            listQuery: {
                page: 1,
                perPage: 10,
                user_code: undefined,
                nickname: undefined,
                status: undefined
            },
            tableData: [],
            columns: [
                {
                    id: 1,
                    label: '用户ID',
                    property: 'user_id',
                    width: 200
                },
                {
                    id: 2,
                    label: '用户编号',
                    property: 'user_code',
                    width: 200
                },
                {
                    id: 3,
                    label: '用户昵称',
                    property: 'nickname',
                    width: 200
                },
                {
                    id: 4,
                    label: '审核状态',
                    property: 'status',
                    width: 200
                },
                {
                    id: 5,
                    label: '审核人',
                    property: 'admin_name',
                    width: 200
                },
                {
                    id: 6,
                    label: '提交时间',
                    property: 'created_at',
                    width: 200
                },
                {
                    id: 7,
                    label: '审核时间',
                    property: 'audit_time',
                    width: 200
                }
            ],
            isVisible: false,
            items: [
                {
                    label: 1,
                    title: '通过'
                },
                {
                    label: 2,
                    title: '拒绝'
                }
            ],
            form: {
                audit: true
            },
            rules: {
                audit: [
                    { required: true, message: '请选择', trigger: 'blur' }
                ]
            },
            total: 0
        }
    },
    created() {
        this.getList()
    },
    mounted() {
        this.getConfig()
    },
    methods: {
        getList() {
            for (let key in this.listQuery) {
                this.listQuery[key] = this.listQuery[key] === "" ? undefined : this.listQuery[key];
            }
            listData(this.listQuery).then(({data}) => {
                this.tableData = data.list
                this.total = data.meta.total
                this.listLoading = false
                this.totalData = [data.header]
            })
        },
        getConfig() {
            getConfig().then(res => {
                this.isOpen = res.data.is_open
            })
        },
        setSwitchData(data) {
            switchData(data).then(res => {
                this.getList()
                this.getConfig()
            })
        },
        setAuditStatus(data) {
            auditStatus(data).then(res => {
                this.isVisible = false
                this.getList()
            })
        },
        handleSwitch(val) {
            this.setSwitchData(val)
        },
        resetSubmit() {
            this.listQuery= {
                page: 1,
                perPage: 10,
                user_code: undefined,
                nickname: undefined,
                status: undefined
            }
            this.getList()
        },
        handleClick(row) {
            this.auditInfo = row
            this.isVisible = true
        },
        onSubmit() {
            this.setAuditStatus({
                "id": this.auditInfo.id,
                "status": this.form.audit
            })
        },
        closeDialog() {
            this.auditInfo = {
                add_time: null,
                address: "",
                admin_id: null,
                admin_name: null,
                created_at: "",
                id: null,
                mobile: "",
                name: "",
                nickname: "",
                status: null,
                updated_at: "",
                user_code: null,
                user_id: null,
                wx_account: "",
                sociaty_join_time: "",
                sociaty_name: ""
            }
        }
    },
}
</script>
<style lang="scss" scoped>
    ::v-deep{
        .el-switch__label{
            color: #ffffff;
        }
        .el-switch__label--right{
            position: absolute;
            left: 10000px;
        }
        .el-switch__label--left{
            position: absolute;
            left: 10000px;
        }
        .el-switch__label--right.is-active{
            left: -1px;
        }
        .el-switch__label--left.is-active{
            left: 20px;
            z-index: 10;
        }
    }
    .information{
        display: flex;
        flex-wrap: wrap;

        .text{
            margin-right: 40px;
            margin-bottom: 15px;

            .tagTitle{
                font-weight: bold;
            }
            .tagContent{
                color: #666666;
            }
        }
    }
    .switch{
        margin-bottom: 18px;
    }
    .demo-form-inline{
        display: flex;
        justify-content: flex-end;
    }
</style>